<template>
  <div class="screen screen-2">
    <el-row :gutter="20" class="box-row">
      <el-col :span="8">
          <el-row class="mb-20">
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 辊压下料(正/负)</div>
              <div class="box-info">
                <span class="font-blue">{{receiptsData.rollInPositiveDownNums || 0}}</span>
                <span class="font-blue"> / </span>
                <span class="font-blue">{{receiptsData.rollInNegativeDownNums || 0}}</span>
              </div>
            </el-card>
          </el-row>
          <el-row>
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 空托盘回运(正/负)</div>
              <div class="box-info">
                <span class="font-blue">{{receiptsData.coilingPositiveNums || 0}}</span>
                <span class="font-blue"> / </span>
                <span class="font-blue">{{receiptsData.coilingNegativeNums || 0}}</span>
              </div>
            </el-card>
          </el-row>
      </el-col>
      <el-col :span="8">
          <el-row class="mb-20">
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 已停用库位</div>
              <div class="box-info font-blue"> {{containerData.stopUsingNums || 0}} </div>
            </el-card>
          </el-row>
          <el-row>
            <el-card class="box-card" shadow="never">
              <div class="box-title"> 已启用库位</div>
              <div class="box-info font-blue"> {{containerData.startUsingNums || 0}} </div>
            </el-card>
          </el-row>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="never">
          <div class="box-title"> AGV状态</div>
          <div class="box-info box-large" v-if="agvList.length">
            <span v-for="(item, index) in agvList"
                  :key="index" :class="[(item.robotConnectStatus == 'DISCONNECTED' || item.robotConnectStatus == 'SLEEPING' || item.robotStopStatus == 'STOPPED' || item.robotStopStatus == 'SUSPENDED')? 'font-red': 'font-green', 'mr-5']">AGV{{index+1}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card pos-relative" shadow="never">
          <div class="box-title"> 上班次任务量统计</div>
          <div class="chartPie" id="chartPie3"></div>
          <div class="chartPie-info pos-absolute">
            <div class="chart-info">
              <div class="chart-title">任务总量</div>
              <div class="font-blue"> {{preTaskData.totalTaskNums || 0 }} </div>
            </div>
            <div class="chart-info">
              <div class="chart-title">平均任务完成时间(分钟)</div>
              <div class="font-blue"> {{preTaskData.avgTaskCompleteTime || 0 }} </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card pos-relative" shadow="never">
          <div class="box-title"> 本班次任务量统计</div>
          <div class="chartPie" id="chartPie4"></div>
          <div class="chartPie-info pos-absolute">
            <div class="chart-info">
              <div class="chart-title">任务总量</div>
              <div class="font-blue"> {{curTaskData.totalTaskNums || 0 }} </div>
            </div>
            <div class="chart-info">
              <div class="chart-title">平均任务完成时间(分钟)</div>
              <div class="font-blue"> {{curTaskData.avgTaskCompleteTime || 0 }} </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getReceipts, getAgv, getContainers, getTasks} from '../service/api'
  import { getShiftTime } from "../util/util";

  export default {
    name: 'Screen2',
    data() {
      return {
        receiptsData:{},
        containerData:{},
        agvList:[],
        preTaskData :{},
        curTaskData :{},
        chartPie3: null,
        chartPie4: null,
        timer: null
      }
    },
    methods: {
      drawPieChart3() {
        this.chartPie3 = this.$echarts.init(document.getElementById('chartPie3'));
        this.chartPie3.setOption({
          title: {
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color:['#1989fa','orange'],
          legend: {
            orient: 'vertical',
            left: 'right',
            data: ['人工', '机器人'],
            textStyle:{
              color: '#ffffff'
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['30%', '60%'],
              data: [
                { value: Math.abs((this.preTaskData && this.preTaskData.subTaskStatisticsInfos && this.preTaskData.subTaskStatisticsInfos.ARTIFICIAL)?this.preTaskData.subTaskStatisticsInfos.ARTIFICIAL.nums:0), name: '人工' },
                { value: Math.abs((this.preTaskData && this.preTaskData.subTaskStatisticsInfos && this.preTaskData.subTaskStatisticsInfos.ROBOT)?this.preTaskData.subTaskStatisticsInfos.ROBOT.nums:0), name: '机器人' },
              ],
              label: { normal: { show: true, position: 'inner' }},
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'inner',
                    formatter: '{c}'
                  }
                }
              },
            }
          ]
        });
      },
      drawPieChart4() {
        this.chartPie4 = this.$echarts.init(document.getElementById('chartPie4'));
        this.chartPie4.setOption({
          title: {
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            data: ['人工', '机器人'],
            textStyle:{
              color: '#ffffff'
            }
          },
          color:['#1989fa','orange'],
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['30%', '60%'],
              data: [
                { value: Math.abs((this.curTaskData && this.curTaskData.subTaskStatisticsInfos && this.curTaskData.subTaskStatisticsInfos.ARTIFICIAL) ? this.curTaskData.subTaskStatisticsInfos.ARTIFICIAL.nums : 0), name: '人工' },
                { value: Math.abs((this.curTaskData && this.curTaskData.subTaskStatisticsInfos && this.curTaskData.subTaskStatisticsInfos.ROBOT) ? this.curTaskData.subTaskStatisticsInfos.ROBOT.nums : 0), name: '机器人' },
              ],
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'inner',
                    formatter: '{c}'
                  }
                }
              }
            }
          ]
        });
      },
      drawCharts() {
        this.drawPieChart3()
        this.drawPieChart4()
      },
      async getData(){
        const resReceipts = await getReceipts()
        const resAgv = await getAgv({
          robotConnectStatus: 0,
          robotErrorCode: 0,
          robotTaskStatus: 0,
          robotProducts:['M1000L']
        })
        const resContainer = await getContainers({
          containerType: "TRAY"
        })
        const {currShift,preShift} = getShiftTime()
        const resCurTask = await getTasks(Object.assign(currShift,{robotType:'M1000L'}))
        const resPreTask = await getTasks(Object.assign(preShift,{robotType:'M1000L'}))
        this.$nextTick(() => {
          resReceipts && (this.receiptsData = resReceipts)
          if(resAgv && resAgv.length){
            this.agvList= [resAgv[0],resAgv[1]]
          }
          resContainer && (this.containerData = resContainer)
          resPreTask && (this.preTaskData = resPreTask)
          resCurTask && (this.curTaskData = resCurTask)
          this.drawCharts()
        })
      }
    },

    mounted: function () {
      this.getData()
      this.timer = setInterval(() => {
        setTimeout(this.getData, 0)
      }, 1000*60)
    },
    beforeDestroy(){
      clearInterval(this.timer);
      this.timer = null;
    }
  }
</script>
<style>

</style>

